/* background colors */
.scrivito-icon-box.square,
.scrivito-icon-box.cricle {
  border: 3px solid transparent;
}

.transparent_bg {
  background-color: transparent !important;
  border-color: transparent !important;
}

.black {
  background-color: #33312d !important;
  border-color: #33312d !important;
}

.gray {
  background-color: #a0a0a0 !important;
  border-color: #a0a0a0 !important;
}

.light-gray {
  background-color: #eee !important;
  border-color: #eee !important;
}

.red {
  background-color: #c5463f !important;
  border-color: #c5463f !important;
}

.green {
  background-color: #439439 !important;
  border-color: #439439 !important;
}

.blue {
  background-color: #3f86ac !important;
  border-color: #3f86ac !important;
}

.yellow {
  background-color: #e1d00e !important;
  border-color: #e1d00e !important;
}

.scrivito-icon-box-widget-icon-color .transparent_bg.scrivito-color-select:after {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: red;
  text-shadow: none !important;
}

/* icon colors */
i.transparent_bg,
.scrivito-icon-box-widget-icon-color .transparent_bg.scrivito-color-select:after {
  background-color: transparent !important;
  color: transparent !important;
}

i.black,
.scrivito-icon-box-widget-icon-color .black.scrivito-color-select:after {
  background-color: transparent !important;
  color: #33312d !important;
}

i.gray,
.scrivito-icon-box-widget-icon-color .gray.scrivito-color-select:after {
  background-color: transparent !important;
  color: #a0a0a0 !important;
}

i.light-gray,
.scrivito-icon-box-widget-icon-color .light-gray.scrivito-color-select:after {
  background-color: transparent !important;
  color: #eee !important;
}

i.red,
.scrivito-icon-box-widget-icon-color .red.scrivito-color-select:after {
  background-color: transparent !important;
  color: #c5463f !important;
}

i.green,
.scrivito-icon-box-widget-icon-color .green.scrivito-color-select:after {
  background-color: transparent !important;
  color: #439439 !important;
}

i.blue,
.scrivito-icon-box-widget-icon-color .blue.scrivito-color-select:after {
  background-color: transparent !important;
  color: #3f86ac !important;
}

i.yellow,
.scrivito-icon-box-widget-icon-color .yellow.scrivito-color-select:after {
  background-color: transparent !important;
  color: #e1d00e !important;
}